<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>个人中心</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
</head>
<script src="${pageContext.request.contextPath}/js/jquery-1.6.3.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/css/unslider.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var staticnum;
		$("#allchoice").attr("checked", false);
		$(".checkboxs").each(function() {
			$(this).attr("checked", false);
		});
		$(".checkboxs").change(function() {

			if ($(this).prop('checked')) {
				var id = $(this).next().val();
				var p = Number($("#price" + id).html());
				var commnum = Number($("#commnum" + id).val());
				p = p * commnum;
				var countp = Number($("#price").html());
				countp = p + countp;
				$("#price").html(countp);
				$("#submitbtn").css("background", "#FF0000");
				$("#submitbtn").css("cursor", "pointer");
			} else {
				var id = $(this).next().val();
				var p = Number($("#price" + id).html());
				var countp = Number($("#price").html());
				var commnum = Number($("#commnum" + id).val());
				p = p * commnum;
				if (countp != 0) {
					countp = countp - p;
					if (countp == 0) {
						$("#submitbtn").css("background", "#FFD39B");
						$("#submitbtn").css("cursor", "not-allowed");
					}
				} else {
					$("#submitbtn").css("background", "#FFD39B");
					$("#submitbtn").css("cursor", "not-allowed");
				}
				$("#price").html(countp);
			}
		});
		$("#allchoice").change(function() {
			if ($(this).prop('checked')) {
				var countp = Number($("#price").html());
				$(".checkboxs").each(function() {
					if ($(this).prop("checked")) {

					} else {
						$(this).prop('checked', "true");
						var id = $(this).next().val();
						var p = Number($("#price" + id).html());
						var commnum = Number($("#commnum" + id).val());
						p = p * commnum;
						countp = p + countp;
						$("#price").html(countp);
					}
				});
				$("#submitbtn").css("background", "#FF0000");
				$("#submitbtn").css("cursor", "pointer");
			} else {
				var countp = Number($("#price").html());
				$(".checkboxs").each(function() {
					if ($(this).prop("checked")) {
						$(this).attr("checked", false)
						var id = $(this).next().val();
						var p = Number($("#price" + id).html());
						var commnum = Number($("#commnum" + id).val());
						p = p * commnum;
						if (countp != 0) {
							countp = countp - p;
							if (countp == 0) {
								$("#submitbtn").css("background", "#FFD39B");
								$("#submitbtn").css("cursor", "not-allowed");
							}
						} else {
							$("#submitbtn").css("background", "#FFD39B");
							$("#submitbtn").css("cursor", "not-allowed");
						}
						$("#price").html(countp);
					}
				});

			}
		});
		/*增加或减少购买数量*/
		$(".reduce").click(function() {
			var id = $(this).children("#isid").val();
			var input = $("#commnum" + id);
			var num = input.val();
			if (num <= 1) {
				input.val(1);
				return false;
			}
			input.val(num - 1);
			$("#fromcommnum" + id).val(num - 1);
			if ($("#choice" + id).prop("checked")) {
				var p = Number($("#price" + id).html());
				var countp = Number($("#price").html());
				$("#price").html(countp - p);
			}

		});
		$(".plus").click(function() {
			var id = $(this).children("#isid").val();
			var input = $("#commnum" + id);
			var num = input.val();
			var stock = $("#stock" + id).val();
			var newnum = Number(num);
			if (num >= stock) {
				alert("只有这么多货啦!");
				return false;
			}
			input.val(newnum + 1);
			$("#fromcommnum" + id).val(newnum + 1);
			if ($("#choice" + id).prop("checked")) {
				var p = Number($("#price" + id).html());
				var countp = Number($("#price").html());
				$("#price").html(countp + p);
			}
			return false;
		});
		/*提交订单按钮  */
		$("#submitOrder").click(function() {
			if (confirm("是否确定提交订单?")) {
				$(".checkboxs").each(function() {
					if ($(this).prop("checked")) {
						var id = $(this).next().val();
						var val = $("#orderform" + id).serializeArray();
						$.post("${pageContext.request.contextPath}/OrderController/addOrder.action", val, function(data) {
							if (data.result == 1) {
								$.get("${pageContext.request.contextPath}/CartController/delete.action", {
									"id" : id
								}, function(data) {});
								alert("提交成功!");
								location.reload();
								return false;
							} else {
								alert("有商品提交失败!请刷新本页查看,已提交完成的商品在已购买商品处查看!");
								return false;
							}
						});
					}

				});
			}
		});
		/*结算按钮  */
		$("#submitbtn").click(function() {
			if (Number($("#price").html()) == 0) {
				return false;
			}
			$("#submitdiv").css("display", "block");
			$(".orderform").each(function() {
				var id = $(this).children("#commidid").val();
				if ($("#choice" + id).prop("checked")) {
					var commname = $(this).children("#commnameid").val();
					;
					var price = $(this).children("#commpriceid").val();
					;
					var commnun = $(this).children("#fromcommnum" + id).val();
					;
					var classname = $(this).children("#classnameid").val();
					;
					$("#spanclassdiv").append(
						"<div class='spanclass'>&nbsp;&nbsp;<span>商品名称:" +
						"</span><span class='span'>" + commname
						+ "</span>&nbsp;&nbsp;<span>价格:</span><span class='span'>" +
						price + "</span>元&nbsp;&nbsp;<span>购买数量:</span><span class='span'>" +
						commnun + "</span>件&nbsp;&nbsp;<span>套餐分类:</span><span class='span'>" +
						classname + "</span></div>"
					);
				}
			});
		});
		$("#closeOrder").click(function() {
			$("#spanclassdiv").html("");
			$("#submitdiv").css("display", "none");
		});
		/* 文本框改变修改备注 */
		$(".remarks").bind('input propertychange', function(e) {
			var id = $(this).next().val();
			$("#remarks" + id).val($(this).val());
		});
		$("#address").change(function() {
			var id = $(this).val();
			$(".addressid").each(function() {
				$(this).val(id);
			});
		});
		$(".addressid").each(function() {
			$(this).val($("#address").val());
		});
		/*移除购物车*/
		$(".deletea").click(function() {
			var href = $(this).attr("href");
			var id = $(this).next().val();
			var val = {
				'id' : id
			};
			$.post(href, val, function() {
				location.reload();
			});
			return false
		});
	});
</script>
<body style="width:1366px">
	<div style="background: #F5F5F5;height:40px;padding-top: 8px"
		id="topdiv">
		<div style="margin-left:100px;">
			您好!<span style="color:#CD4F39"> ${user.name} </span>
		</div>
		<div style="margin-left:750px;">
			<a href="${pageContext.request.contextPath}">商城首页 <span
				class="fa fa-home" style="color:#FF7F00"> </span>
			</a>
		</div>
		<div style="margin-left:50px;">
			<a href="${pageContext.request.contextPath}/user/center.action">个人中心<span
				class="fa fa-cog" style="color:#FF7F00"></span>
			</a>
		</div>
		<div style="margin-left:50px;">
			<a href="${pageContext.request.contextPath}/user/outLogin.action">退出登录<span
				class="fa fa-user-circle-o" style="color:#FF7F00"></span>
			</a>
		</div>
	</div>
	<div id="toplogo" style="border-bottom:2px solid #FF3030;height:102px;">
		<div style="margin-left: 200px;float: left">
			<a href="${pageContext.request.contextPath}"> <img
				src="${pageContext.request.contextPath}/img/juninglogo.jpg"
				width="100px" height="100px" />
			</a>
		</div>
		<div style="float: left;margin-left:500px; ">
			<img src="${pageContext.request.contextPath}/img/userCenter.png">
		</div>
	</div>
	<div>
		<div class="mainLeft" style="float: left;">
			<ul style="list-style: none;">
				<li><a style="color:#FF6347;font-size: 16px;" href="#">我的购物车</a>
				</li>
				<li><a
					href="${pageContext.request.contextPath}/OrderController/allOrderByUserId.action">我的订单</a>
				</li>
				<li><a
					href="${pageContext.request.contextPath}/AddressController/listAddress.action">我的地址</a>
				</li>
				<li><a
					href="${pageContext.request.contextPath}/user/center.action">账户设置</a>
				</li>
			</ul>
		</div>
		<div
			style="float: left;border:1px solid #FFEBCD;margin: 40px 0 0 100px;min-height: 500px;width: 950px">
			<c:if test="${clist==null }">
				<h3 style="margin: 100px 0 0 300px">
					您的购物车是空的哦!赶快去 <a href="${pageContext.request.contextPath}"
						style="color:#FF7F00">挑选吧!</a>
				</h3>
			</c:if>
			<c:if test="${clist!=null }">
				<c:forEach items="${clist}" var="cart">
					<div class="commodity">
						<form style="display: none" class="orderform"
							id="orderform${cart.id }">
							<input type="hidden" id="commidid" value="${cart.id }"> <input
								type="hidden" name="commid" value="${cart.commid }"> <input
								type="hidden" name="commname" id="commnameid"
								value="${cart.commname }"> <input type="hidden"
								name="classname" id="classnameid" value="${cart.classname }">
							<input type="hidden" name="userid" id="" value="${cart.userid }">
							<input type="hidden" name="seckill" id="" value="${cart.seckill}">
							<input type="hidden" name="remarks" id="remarks${cart.id}">
							<input type="hidden" id="commpriceid" value="${cart.price}">
							<input type="hidden" name="num" id="fromcommnum${cart.id }"
								value="${cart.commnum }"> <input type="hidden"
								name="img" id="fromcommimg${cart.id }" value="${cart.img }">
							<input type="hidden" name="addressid" class="addressid">
							 <input type="hidden"
								name="classid" id="" value="${cart.classid }"> <input
								type="hidden" name="username" value="${user.name}">
						</form>
						<div style="height: 25px;background:#BFBFBF ;width: 100%">
							<span style="margin-left: 3px">选择</span> <span
								style="margin-left: 124px">商品名称</span> <span
								style="margin-left: 115px">所选分类</span> <span
								style="margin-left: 90px">价格</span> <span
								style="margin-left: 73px">购买数量</span> <span
								style="margin-left: 73px">备注</span> <span
								style="margin-left: 80px">操作</span>
						</div>

						<div style="height: 130px;border-bottom: 1px solid #BFBFBF;">
							<div style="float: left;margin:15px 0 0 10px; ">
								<div style="float:left;margin:40px 0 0 5px">
									<input type="checkbox" id="choice${cart.id}" class="checkboxs">
									<input type="hidden" value="${cart.id}">
								</div>
								<div style="float: left;margin-left: 10px">
									<img
										src="${pageContext.request.contextPath}/file/img/${cart.img}"
										style="width: 100px;height: 100px;border:1px solid #BFBFBF;">
								</div>
								<div
									style="width: 150px;height: 100%;float: left;margin:0 0 0 10px; ">
									${cart.commname}</div>
							</div>
							<div
								style="text-align: center;color: #A8A8A8;height: 100px;width: 100px;
					float: left;margin: 17px 0 0 20px;border: 1px dashed #BFBFBF ">
								${cart.classname}</div>
							<div style="float: left;margin: 49px 0 0 60px;color: #EE7942"
								id="price${cart.id}">${cart.price}</div>
							<div style="margin: 10px 0 0 40px;float: left;">
								<div class="reduce" id="reduce" style="float: left;">
									<span class="fa fa-chevron-left"></span> <input type="hidden"
										value="${cart.id}" id="isid">
								</div>
								<div style="	float: left">
									<input readonly="readonly" id="commnum${cart.id}" type="text"
										value="${cart.commnum}"
										style="width:23px;height:20px;color:#FF0000;margin: 40px 0 0 20px;">
								</div>
								<div class="plus" id="plus" style="float: left;">
									<span class="fa fa-chevron-right"></span> <input type="hidden"
										value="${cart.id}" id="isid">
								</div>
							</div>
							<div style="margin:10px 0 0 20px;float: left;">
								<textarea class="remarks" cols="10" rows="4"
									style="resize : none;border:1px solid #BFBFBF"></textarea>
								<input type="hidden" value="${cart.id}">
							</div>
							<div style="margin:50px 0 0 30px;float: left;">
								<a class="deletea"
									href="${pageContext.request.contextPath}/CartController/delete.action">移出购物车</a>
								<input type="hidden" value="${cart.id }">
							</div>
						</div>
					</div>
					<input type="hidden" value="${cart.stock}" id="stock${cart.id }">
				</c:forEach>
				<div style="margin:20px 0 0 665px;width: 250px;position:relative;">
					<div style="float:left;margin:15px 0 0 0">
						<span>全选</span> <input type="checkbox" id="allchoice">
					</div>
					<div style="float:left;margin: 4px 0 0 10px">
						<span class=" fa fa-yen fa-2x"
							style="color:#FF7F00;margin-top: 5px "></span> <span
							style="color:#FF7F00;font-size: 23px " id="price">0</span>
					</div>
					<div style="position: absolute;left: 155px;top:0;z-index: 99;">
						<button id="submitbtn">结&nbsp;&nbsp;&nbsp;&nbsp;算</button>
					</div>
				</div>
			</c:if>
		</div>
	</div>
	<div id="submitdiv">
		<div>
			<div id="spanclassdiv"></div>
			<div id="addressdiv">
				<span>收货地址:</span>
				<c:choose>
					<c:when test="${addresslist==null }">
						<span style="margin-left: 50px">您还没有填写地址,</span>
						<a href="#">点击前去添加!</a>
					</c:when>
					<c:otherwise>
						<select style="color:#FF7256" id="address">
							<c:forEach items="${addresslist}" var="address" varStatus="a">
								<c:choose>
									<c:when test="${address.defaults==0}">
										<option selected="selected" value="${address.id}">${address.address }&nbsp;&nbsp;${address.name }&nbsp;&nbsp;${address.phonenum }</option>
									</c:when>
									<c:otherwise>
										<option value="${address.id}">${address.address }&nbsp;&nbsp;${address.name }&nbsp;&nbsp;${address.phonenum }</option>
									</c:otherwise>
								</c:choose>
							</c:forEach>
						</select>
					</c:otherwise>
				</c:choose>
			</div>
		</div>
		<div style="margin: 10px 0 0 250px;">
			<span>付款方式:</span> <select style="color:#FF7256" disabled="disabled">
				<option value="货到付款">货到付款</option>
			</select>
		</div>
		<div
			style="position: absolute;left:465px;top:85%;z-index: 999;width:220px;">
			<button id="submitOrder">提交订单</button>
			<button id="closeOrder" style="margin-left:10px">取&nbsp;&nbsp;&nbsp;消</button>
		</div>
	</div>
</body>

<style type="text/css">
#submitOrder, #closeOrder {
	height: 35px;
	width: 100px;
	background: #FF6347;
	border: 2px solid #FF7F50;
	color: #fff;
	border-radius: 6px;
	font-size: 19px;
}

#submitOrder:hover {
	background: #FF0000;
}

#closeOrder:hover {
	background: #FF0000;
}

#addressdiv {
	margin: 20px 0 0 130px;
}

.span {
	color: #FF7256;
}

.spanclass {
	height: 40px;
	width: 600px;
	border: 1px solid #BFBFBF;
	margin: 10px 0 0 45px;
}

#submitdiv {
	position: fixed;
	left: 400px;
	top: 180px;
	z-index: 999;
	border: 1px solid #BFBFBF;
	min-height: 330px;
	width: 700px;
	background: #fff;
	display: none;
}

#submitbtn {
	height: 50px;
	width: 100px;
	color: #fff;
	background: #FFD39B;
	font-size: 20px;
	border: 2px solid #FFD39B;
	border-radius: 6px;
}

#submitbtn:hover {
	cursor: not-allowed;
}

.reduce {
	margin: 40px 0 0 20px;
	color: #999999;
}

.reduce:hover {
	cursor: pointer;
	color: #030303;
}

.plus {
	margin: 40px 0 0 20px;
	color: #999999;
}

.plus:hover {
	cursor: pointer;
	color: #030303;
}

a {
	color: #191970;
	font-weight: 600
}

a:hover {
	color: #4F4F4F;
	text-decoration: none;
	cursor: pointer;
}

.commodity {
	border: 1px solid #BFBFBF;
	width: 900px;
	margin: 40px 0 0 20px;
	background: #EDEDED;
}

.mainLeft ul {
	margin: 50px 0 0 70px;
}

.mainLeft li {
	margin: 20px 0 0 0;
	width: 100px;
	height: 40px;
	text-align: center;
}

.mainLeft li a {
	color: #262626;
}

.mainLeft li a:hover {
	color: #FF6347;
	text-decoration: none;
	font-size: 16px;
}

.mainLeft li:hover {
	cursor: pointer;
}

#topdiv div {
	float: left;
}

.mainLeft li a {
	color: #262626;
}

.mainLeft li a:hover {
	color: #FF6347;
	text-decoration: none;
	font-size: 16px;
}
</style>
</html>